<template>
  <div class="register">
     <div>
      <div>
         <img src="../assets/logo.png" alt="">
      </div>
    </div>
     <van-form validate-first @failed="onFailed">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="phone"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写正确的手机号' }]"
      />
      <van-field
        v-model="password"
        type="pwd"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="password"
        type="repwd"
        name="密码"
        label="密码"
        placeholder="确认密码"
        :rules="[{ required: true, message: '请确认密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round class="btn" replace to="/" native-type="submit">注册</van-button>
      </div>
    </van-form>
  </div>
</template>
<style scoped>
img{
  margin-left: 10%;
  width: 80%;
}
.btn{
  margin-left: 10%;
  width: 80%;
  font-size: 27px;
  color: #333333;
  line-height: 1.2;
  text-align: center;
  background-image: url('../assets/bg-01.jpg');
}
</style>
<script>
export default {
  data() {
    return {
      username: '',
      pwd: '',
      repwd:'',

    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
    },
  },
}
</script>